<template>
	<view>
		<view class="m-from">
			<view class="m-item image">
				<view class="m-item-left">
					<text>头像</text>
				</view>
				<button class="m-item-right"  open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="m-item-logo">
						<image v-if="form.image" :src="form.image" mode="aspectFill"></image>
						<image v-else src="@/static/center/center-logo.png" mode="aspectFill"></image>
					</view>
					<image class="u-m-l-20" src="../static/shop/icon-right.png" mode=""></image>
				</button>
			</view>
			<view class="m-item">
				<view class="m-item-left">
					<text>真实姓名</text>
				</view>
				<view class="m-item-right">
					<input v-model="form.real_name" placeholder="请输入真实姓名">
				</view>
			</view>
			<view class="m-item">
				<view class="m-item-left">
					<text>微信昵称</text>
				</view>
				<view class="m-item-right">
					<input type="nickname" v-model="form.nickname" placeholder="请输入微信昵称">
				</view>
			</view>
			<view class="m-item">
				<view class="m-item-left">
					<text>手机号</text>
				</view>
				<view class="m-item-right">
					<input type="number" :value="userinfo.username" disabled placeholder="请输入手机号">
				</view>
			</view>
		</view>
		
		<view class="m-bottom">
			<view class="m-btn" @click="submitFun">
				<text>保存修改</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {get_userInfo} from "@/common/function/api_fun.js"
	export default {
		data() {
			return {
				form:{
					image:'',
					nickname:'',
					real_name:''
				},
				userinfo:{}
			}
		},
		onLoad() {
			get_userInfo((info)=>{
				this.userinfo = info
				this.form.image = info.user_image || ''
				this.form.nickname = info.name || ''
				this.form.real_name = info.real_name || ''
			})
		},
		methods: {
			onChooseAvatar(e) {
				var that = this
				let file = e.detail.avatarUrl
				this.$http.getUpload('index_ossupload', file,{}, 'file').then((res) => {
					if (res.code == 1) {
						that.form.image = res.data
					} else {
						that.$m.msg(res.msg)
					}
				})
			},
			submitFun(){
				if(!this.form.image){
					return this.$m.msg('请上传图片')
				}
				if(!this.form.nickname){
					return this.$m.msg('请填写名称')
				}
				this.$http.getJson('users_editInfo',this.form).then(res=>{
					if(res.code == 1){
						this.$m.msg('提交成功',()=>{
							this.to_back()
						})
					}else{
						this.$m.msg(res.message)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
.m-from{
	background: #FFFFFF;
	padding: 0 25rpx;
	.m-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 103rpx;
		border-bottom: 1px solid #E5DCCD;
		.m-item-left{
			font-size: 30rpx;
			color: #34302D;
			font-weight: 600;
		}
		.m-item-right{
			flex: 1;
			height: 100%;
			input{
				width: 100%;
				height: 100%;
				text-align: right;
				color: #75706A;
				font-size: 30rpx;
			}
		}
		button{
			margin: 0;
			padding: 0;
			background: transparent;
			&::after{
				content: '';
				border: 0;
			}
		}
	}
	.image{
		height: 123rpx;
		.m-item-right{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			image{
				width: 30rpx;
				height: 30rpx;
			}
			.m-item-logo{
				width: 100rpx;
				height: 100rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
	}
}

.m-bottom{
	position: fixed;
	bottom: 120rpx;
	width: 750rpx;
	display: flex;
	justify-content: center;
	.m-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 700rpx;
		height: 100rpx;
		background: #D3A358;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 32rpx;
		color: #fff;
	}
}
</style>
